<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
        <link href="templatemo_style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="stylesheet/styles.css" />

        <script language="javascript" type="text/javascript">
            function clearText(field)
            {
                if (field.defaultValue == field.value) field.value = '';
                else if (field.value == '') field.value = field.defaultValue;
            }
        </script>
        <script language="javascript" type="text/javascript" src="scripts/mootools-1.2.1-core.js"></script>
        <script language="javascript" type="text/javascript" src="scripts/mootools-1.2-more.js"></script>
        <script language="javascript" type="text/javascript" src="scripts/slideitmoo-1.1.js"></script>
        <script language="javascript" type="text/javascript">
            window.addEvents({
                'domready': function(){
                    /* thumbnails example , div containers */
                    new SlideItMoo({
                        overallContainer: 'SlideItMoo_outer',
                        elementScrolled: 'SlideItMoo_inner',
                        thumbsContainer: 'SlideItMoo_items',		
                        itemsVisible: 5,
                        elemsSlide: 3,
                        duration: 200,
                        itemsSelector: '.SlideItMoo_element',
                        itemWidth: 140,
                        showControls:1});
                }
		
            });
        </script>
    </h:head>
    <h:body>
        <div id="templatemo_wrapper">
            <div id="templatemo_menu">
                <ul>
                    <li><a href="#" class="current"><span>.01</span>Home</a></li>
                    <li><a href="http://www.templatemo.com/page/1" target="_parent"><span>.02</span>Photo</a></li>
                    <li><a href="http://www.flashmo.com/page/1" target="_parent"><span>.03</span>Album</a></li>
                    <li><a href="#"><span>.04</span>FAQ</a></li>
                    <li><a href="#"><span>.05</span>Contact</a></li>
                </ul>    	
            </div> <!-- end of templatemo_menu -->

            <div id="templatemo_header_bar">

                <div id="header"><div class="right"></div>

                    <h1><a href="#">
                            <img src="images/logo.gif" alt="Site Title" />
                            <span>photo share online</span>
                        </a></h1>
                </div>

                <div id="search_box">
                    <form action="#" method="get">
                        <input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
                        <input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />
                    </form>
                </div>

            </div> <!-- end of templatemo_header_bar -->

            <div class="cleaner"></div>

            <div id="sidebar"><div class="sidebar_top"></div><div class="sidebar_bottom"></div>

                <div class="sidebar_section">

                    <h2>Members</h2>

                    <form action="#" method="get">
                        <label>Username</label>
                        <input type="text" value="" name="username" size="10" class="input_field" title="username" />
                        <label>Password</label>
                        <input type="password" value="" name="password" class="input_field" title="password" />
                        <a href="#">Register</a> 
                        <input type="submit" name="login" value="Login" alt="Login" id="submit_btn" title="Login" />
                    </form>

                    <div class="cleaner"></div>

                </div>

                <div class="sidebar_section">

                    <h2>Categories</h2>

                    <ul class="categories_list">
                        <li><a href="#">Lorem ipsum dolor</a></li>
                       
                    </ul>
                </div>

                <div class="sidebar_section">

                    <h2>Statistics</h2>

                    <div class="image_wrapper"><a href="http://www.templatemo.com/page/7" target="_parent"><img src="images/image_01.jpg" alt="product" /></a></div>            
                    <div class="discount"><span></span> | <a href="#">Read more</a></div>

                </div>  

            </div> <!-- end of sidebar -->

            <div id="templatmeo_content">

                <div id="latest_product_gallery">

                    <h2>new images added</h2>

                    <div id="SlideItMoo_outer">	
                        <div id="SlideItMoo_inner">			
                            <div id="SlideItMoo_items">
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_01.png" alt="product 1" /></a>

                                </div>	
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_02.png" alt="product 2" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_03.png" alt="product 3" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_04.png" alt="product 4" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_05.png" alt="product 5" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_06.png" alt="product 6" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_07.png" alt="product 7" /></a>
                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_08.png" alt="product 8" /></a>
                                </div>
                            </div>			
                        </div>
                    </div>

                </div> <!-- end of latest_content_gallery -->

                <div class="content_section">

                    <h2>Welcome to photo share online</h2>

                    <p><a href="http://www.templatemo.com" target="_parent">register to update and share photo free</a></p>
                </div>

                <div class="content_section">

                    <h2>Highlights album</h2>

                    <div class="product_box margin_r35">

                        <h3>Phasellus eget lorem</h3>

                        <div class="image_wrapper"> <a href="http://www.templatemo.com/page/1" target="_parent"><img src="images/image_02.jpg" alt="product 2" /></a> </div>

                        <p class="price">Price: $350</p>
                        <a href="#">Detail</a> | <a href="#">Buy Now</a>

                    </div>

                    <div class="product_box margin_r35">
                        <h3>Nunc condimentum</h3>

                        <div class="image_wrapper"> <a href="http://www.templatemo.com/page/2" target="_parent"><img src="images/image_03.jpg" alt="product 3" /></a> </div>

                        <p class="price">Price: $550</p>
                        <a href="#">Detail</a> | <a href="#">Buy Now</a>
                    </div>

                    <div class="product_box">
                        <h3>Sed sit amet sem</h3>

                        <div class="image_wrapper"> <a href="http://www.templatemo.com/page/3" target="_parent"><img src="images/image_04.jpg" alt="product 4" /></a> </div>

                        <p class="price">Price: $250</p>
                        <a href="#">Detail</a> | <a href="#">Buy Now</a>
                    </div>

                    <div class="cleaner"></div>

                    <div class="product_box margin_r35">
                        <h3>Etiam vitae consequat</h3>

                        <div class="image_wrapper"> <a href="http://www.templatemo.com/page/4" target="_parent"><img src="images/image_05.jpg" alt="product 5" /></a> </div>

                        <p class="price">Price: $850</p>
                        <a href="#">Detail</a> | <a href="#">Buy Now</a>
                    </div>

                    <div class="product_box margin_r35">
                        <h3> Vivamus at justo</h3>

                        <div class="image_wrapper"> <a href="http://www.templatemo.com/page/5" target="_parent"><img src="images/image_06.jpg" alt="product 6" /></a> </div>

                        <p class="price">Price: $450</p>
                        <a href="#">Detail</a> | <a href="#">Buy Now</a>
                    </div>

                    <div class="product_box">
                        <h3> Vivamus at justo</h3>

                        <div class="image_wrapper"> <a href="http://www.templatemo.com/page/6" target="_parent"><img src="images/image_07.jpg" alt="product 7" /></a> </div>

                        <p class="price">Price: $350</p>
                        <a href="#">Detail</a> | <a href="#">Buy Now</a>
                    </div>

                    <div class="cleaner"></div>

                    <div class="button_01"><a href="#">View All</a></div>

                </div>

            </div> <!-- end of templatmeo_content -->


        </div> <!-- end of templatemo_wrapper -->

        <div id="templatemo_footer_wrapper">

            <div id="templatemo_footer">

                <ul class="footer_menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="http://www.templatemo.com/page/1" target="_parent">Photo</a></li>
                    <li><a href="http://www.flashmo.com/page/1" target="_parent">Album</a></li>
                   
                    <li><a href="#">FAQ</a></li>
                    <li class="last_menu"><a href="#">Contact</a></li>
                </ul>

                Copyright © 2012 <a href="#">GROUP3-c0910G</a> | 
                Designed by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a> | 
                Validate <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

            </div> <!-- end of footer -->

        </div> <!-- end of footer_wrapper -->
    </h:body>
</html>

